<template>
  <div class="head">
    <dl>
      <dd class="logo">
        <img src="~assets/images/logo.png" />
      </dd>
      <dd>
        <li><nuxt-link to="/">首页</nuxt-link></li>
        <li><nuxt-link to="/news">新闻页</nuxt-link></li>
      </dd>
      <dd>
        <div>IP:</div>
        <input />
        注册|
        <a @click="change">登录</a>
        {{ info }}
      </dd>
    </dl>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ip: "2",
    };
  },
  props: {
    info: {
      type: String,
      default: "默认值",
    },
  },
  async asyncData({ app }) {
    const res = await app.$axios.$get(
      "https://trail.anning.city/bigdataapi/dataoverview/rightbottom"
    );
    const list = res.data.last_product;
    console.log("3213213", list);
    return { list };
  },
  watch: {
    $route(to, from) {
      console.log(to);
      this.setActive();
    },
  },
  methods: {
    change() {
      this.$emit("ListenToChildEvent", true, 2);
    },
    setActive() {
      console.log("2", $nuxt.$options.router);
    },
  },
  mounted() {
    // this.setActive();
  },
};
</script>

<style>
.head {
  width: 100%;
  height: 160px;
  background-color: aquamarine;
}
.head dl {
  width: 1400px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.head dl li {
  list-style: none;
  float: left;
  margin: 0px 25px;
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: 400;
}
.head dl li a {
  text-decoration: none;
  color: #2f3f5b;
}
.head dl .logo {
  float: left;
}
.nuxt-link-exact-active {
  color: #000;
  font-weight: bold;
}
</style>
